<!DOCTYPE html>
<html>
<#assign ctx = request.contextPath />
<head lang="en">
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="${ctx}/css/bootstrap.css" rel="stylesheet">
	<title></title>
<head>
<body>
    <div class="form-inline">
      <div data-toggle="distpicker">
        <div class="form-group">
          <label class="sr-only" for="province1">Province</label>
          <select class="form-control" id="province1"></select>
        </div>
        <div class="form-group">
          <label class="sr-only" for="city1">City</label>
          <select class="form-control" id="city1"></select>
        </div>
        <div class="form-group">
          <label class="sr-only" for="district1">District</label>
          <select class="form-control" id="district1"></select>
        </div>
        <div class="form-group">
          <select class="form-control" id="languages" name = "languages" width="100px">
          	<#list languages as language>
				<option value="${language.en}" >${language.ch}</option>
			</#list>
          </select>
        </div>
        <button class="btn btn-primary" id="doTranslate">翻译</button>
      </div>
      
      <div class="form-group">
          <input class="form-control" id="translate"/>
       </div>
    </div>

   	<br/>
   	
   	<!--
   	<a href="hellow" >hellow</a><button id="test">test</button>
   	-->
	<script src="${ctx}/js/jquery.min.js"></script>
	<script src="${ctx}/js/bootstrap.js"></script>
	<script src="${ctx}/js/distpicker.data.js"></script>
	<script src="${ctx}/js/distpicker.js"></script>
	<script src="${ctx}/js/main.js"></script>
	<script>
		$(function(){
			$("#test").click(function(){
				var data = JSON.stringify(ChineseDistricts);
				//console.log(JSON.stringify(ChineseDistricts));
				$.ajax({
					data : {"data":data},
					url : "ruanTran",
					type : "post",
					success : function(){
						console.log("ok");
					}
				});
			});
			$("#doTranslate").click(function(){
				var area = $("#district1").val();
				var language = $("#languages").val();
				$.ajax({
					data : {
						"area" : area,
						"language" : language
						},
					url : "translate",
					type : "post",
					success : function(data){
						$("#translate").val(data);
					}
					
				});

			});
		});
	</script>
 </body>
 </html>